<template>
  <div>
    <div>
      <span class="basic">询价单管理</span>
    </div>
    <!--搜索-->
    <div class="toolbar">
      <el-text class="mx-1">联系人:&nbsp;</el-text>
      <el-input
        v-model="params.saler"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">联系方式:&nbsp;</el-text>
      <el-input
        v-model="params.mobile"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">状态:&nbsp;</el-text>
      <el-select
        v-model="params.status"
        placeholder="请选择"
        style="width: 100px; margin-right: 20px"
      >
        <el-option label="全部" :value="0" />
      </el-select>
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>

    <!-- 表格数据 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="saler" label="联系人" align="center" />
      <el-table-column prop="mobile" label="联系方式" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <span v-if="row.status == 1">待报价</span>
          <span v-else-if="row.status == 2">已报价</span>
          <span v-else-if="row.status == 3">确认签约</span>
          <span v-else-if="row.status == 4">拒绝合作</span>
        </template>
      </el-table-column>
      <el-table-column prop="freight" label="运费" align="center" />
      <el-table-column prop="price" label="总价" align="center" />
      <el-table-column label="操作" align="center" width="420px">
        <template #default="{ row }">
          <el-button @click="toDetail(row.id)">产品报价</el-button>
          <el-button type="success">修改订单</el-button>
          <el-button type="primary">确认签约</el-button>
          <el-button type="warning">拒绝合作</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="background-color: #fff">
      <el-pagination
        layout="prev, pager, next,sizes,total,jumper"
        :total="total"
        @current-change="chpage"
        @size-change="chsize"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { enquiryList } from "@/api/enquiry.js";
import { getUser } from "@/utils/session.js";
const router = useRouter(); // 获取路由对象
const tableData = ref([]);
let params = ref({
  page: 1,
  pageSize: 10,
  saler: "", // 使用用户输入的询价编号
  mobile: "", // 使用用户输入的订单编号
  status: "",
  userId: getUser().id
});
const total = ref(0); // 总记录数

// 分页查询询价单列表
async function getList() {
  // 准备查询参数

  let res = await enquiryList(params.value);
  if (res.code == 200) {
    tableData.value = res.data.list;
    params.value.page = res.data.page;
    params.value.pageSize = res.data.pageSize;
    total.value = res.data.total;
  }
}
//跳转详情页面
function toDetail(eid) {
  router.push({ path: "/enquiry/detail", query: { eid } });
}

// 重置表单
function reset() {
  data.value.enquiy_id = "";
  data.value.order_id = "";
  getList(); // 重置后重新加载列表
}

// 分页处理
function chpage(pg) {
  page.value = pg;
  getList();
}

function chsize(ps) {
  pageSize.value = ps;
  page.value = 1;
  getList();
}

// 初始化加载列表
onBeforeMount(() => {
  getList();
});
</script>

<style scoped>
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  display: inline-block;
  border-style: none;
}
</style>
